<template>
	<view>
		
	
		<!-- 内容 -->
		<view class="combodybj">
			<view v-show='flag1'>
			<view class="con_input bgdfff">
				<view class="input" :id="[float1?'active':'']">
					<view class="font32 center">姓名</view>
					<input class="uni-input font32" type="text" placeholder="请输入微信账号持有人姓名" placeholder-class="place" @focus="change1" focus=true v-model="name"/>
				</view>
			</view>
			
			<view class="con_input bgdfff">
				<view class="input" :id="[float2?'active':'']">
					<view class="font32 center">账号</view>
					<input class="uni-input font32" type="text" placeholder="请输入您要绑定的微信账号"  placeholder-class="place" @focus="change2" v-model="number"/>
				</view>
			
				<!-- 上传图片 -->
				<view class="upload bgdfff">
					<view class="font32">上传支付二维码:</view>
					<image :src="imgurl" @click="upload"></image>
				</view>
				<!-- 选框 -->
				<view class="radio bgdfff">
					<view class="font32">是否设为默认</view>
					<view class="right">
						<radio-group @change="radioChange">
							<label>
								 <view>
									<radio value="1" />是
								</view>
								<view>
									<radio value="0" checked="true"/>否
								</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
				<button class="colorfff sysbj font34 btn_sub" @click="sub_btn">绑定</button>
				
				
				
			</view>
			<!-- 绑定后显示 -->
			<view v-show="!flag1" class='bgdfff'>
				<view class="name font32 colorcdc">			
					<view>姓名</view>
					<view>{{userName}}</view>
				</view>
				<view class="name font32 colorcdc">			
					<view>微信账号</view>
					<view>{{userNumber}}</view>
				</view>
				<view class="font32 colorcdc" style="padding-left:25upx;">付款二维码：</view>
				<view class="imag"><image :src="qrcode" ></image></view>
				<view class="font32 colorcdc" style="padding-left:25upx;">是否为默认付款方式：{{is_default1=='1'?'是':'否'}}</view>
				<button class="colorfff sysbj font34 btn_sub" @click="xgBtn">修改</button>
			</view>
		</view>
		
		
		
	</view>
</template>
<script>
	import uniIcon from '../../../components/uni-icon/uni-icon.vue' //图标
	export default {
		data() {
			return {
				float1:true,
				float2:false,
				imgurl:"../../static/myimg/add_pic.png",
				choseimg:'',
				name:"",
				number:"",
				current:'',
				is_default:'',
				is_default1:'',
				userName:'',
				userNumber:'',
				qrcode:'',
				flag1:true
			};
		},
		components:{
			uniIcon
		},
		onLoad(){
			this.getstatus() //获取绑定状态
		},
		methods:{
			 reback(){ //返回
				uni.navigateTo({
					url:'../my/pay_type'
				})
			},
			change1(){
				this.float1=true;
				this.float2=false
			},
			change2(){
				this.float1=false;
				this.float2=true
			},
			// 选框
			radioChange(evt){
				console.log(evt.detail.value)
				this.is_default=evt.detail.value
			},
			// 上传图片
			upload(){
				var that=this
				uni.chooseImage({
					count:1,//图片数量
					sizeType:['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						that.choseimg=res.tempFilePaths;
						that.imgurl=res.tempFilePaths[0]
					}
				})
			},
			// 获取绑定状态
			getstatus(){
	
				//发送请求
				uni.request({
					url:this.$HttpHead+'user/get_user_bank',
					data:{
						uid:uni.getStorageSync('udata').uid,
						token:uni.getStorageSync('udata').token,					
					},
					header: {'content-type': 'application/x-www-form-urlencoded'},
					method:'POST',
					success:(res)=>{
						console.log(res)
						if(res.data.status=="ok"){
							for(let i=0;i<res.data.data.length;i++){
								if(res.data.data[i].type=='3'){
									this.flag1=false;
									this.userName=res.data.data[i].user_name;
									this.userNumber=res.data.data[i].bank_number;
									this.qrcode=res.data.data[i].qrcode;
									this.is_default1=res.data.data[i].is_default;
									break;
								}else{
									this.flag1=true;
								}
							}
						
						}else if(res.data.status=="error"){
							if(res.data.errormsg=="token验证失败"){
								uni.showToast({
									title:'您的账号在另一台设备正在登录',
									icon:"none",
									duration:1500
								});
								setTimeout(function(){
									uni.navigateTo({
										url:'../login/login'
									})
									
								},2000)
							}else{
								console.log(res.data.errormsg)
								/* uni.showToast({
									title:res.data.errormsg,
									icon:"none",
									duration:1500
								}); */
							}
						}
					}
				})
			},
			// 修改
			xgBtn(){
				this.flag1=true
			},
			// 提交
			sub_btn(){
			
				// 姓名正则
					var reg_name= /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)||([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/;
					if(this.name==''){
						uni.showToast({
							title: '请输入姓名',
							icon: "none",
							duration: 1500
						});
					}else if(!reg_name.test(this.name)){
					
						uni.showToast({
							title: '姓名输入有误 ，请重新输入',
							icon: "none",
							duration: 1500
						});
					}else if(this.number==''){
						uni.showToast({
							title: '请输入微信账号',
							icon: "none",
							duration: 1500
						});
					}else{
					
				
					uni.uploadFile({
						url:this.$HttpHead+'user/add_user_bank',
						filePath:this.imgurl,
						name:'file',
						formData:{
							"uid":uni.getStorageSync('udata').uid,
							"token":uni.getStorageSync('udata').token,
							'type':'3',
							'user_name':this.name,
							'bank_name':'微信',
							'bank_number':this.number,
							'is_default':this.is_default
					
						},
						success: (res) => {
							var n=JSON.parse(res.data).status
							if(n=='ok'){
								uni.showToast({
									title: '绑定成功',
									icon: "none",
									mask: true,
									duration: 2000
								});
								setTimeout(()=>{
									this.getstatus()
									this.flag1=false;
									console.log('123')
								},1500)
								
							}else{
								if(res.errMsg=="token验证失败"){
										uni.showToast({
											title: '您的账号在另一台设备正在登录',
											icon: "none",
											duration: 1500
										});
										setTimeout(function(){
											uni.reLaunch({
								                  url: '../login/login'
								             });
										},2000)
									}else{
										uni.showToast({
											title: res.errMsg,
											icon: "none",
											duration: 1500
										});
									}
							}
						}
						
					})
				}
					
			}
		
		
		}
	}
</script>
<style lang="less">
	
	// 输入内容
	.input{
		display: flex;
		align-items: center;
		padding: 25upx 0 ;
		border-bottom: 1px solid #cdced0;
		view{width:12vw}
		input{
			width: 70vw;
		}
	}
	.con_input{
		padding: 0 15upx 15upx;
	}
	#active{
		border-bottom: 1px solid #ea9d29;
	}
	// 上传图片
	.upload{
		display: flex;
		align-items: center;
		padding:50upx 15upx;
		image{
			width: 200upx;
			height: 200upx;
			margin: 0 15upx
		}
	}
	// 选框
	.radio{
		display: flex;
		justify-content:space-between;
		padding-right: 200upx;
		margin-bottom: 100upx;
	}
	.right label{
		width:35vw;
		display: flex;
		justify-content: space-between;
	}
	// 绑定
	.btn_sub{
		
		width: 80vw;
		margin: 50upx auto;
	}
	
	.name{
		display: flex;
		justify-content: space-between;
		padding:15upx 25upx;
		border-bottom: 1px solid #eee
	}
	.imag{
		display: flex;
		justify-content: center;
		padding: 30upx 0;
		
		image{
			width: 80vw;
			height: 450upx;
			
		}
	} 
</style>